import React, { Component } from 'react';
import { connect, } from 'react-redux';
import { Link } from 'react-router-dom';
import request from '../api/request'
import { getImgUrl, openSherd, setSherd } from '../utils/utils'

class Integral extends Component {
    constructor(props) {
        super(props)
        this.state = {
            list: [],
            friendList: [],
        }
    }

    componentDidMount() {
        const { dispatch, user } = this.props
        setSherd(user.openid, dispatch)
    }

    renderMe() {
        const { user, gameInfo } = this.props
        return (
            <div className="list-box list-box-me">
                <div className="list-box-tx" onClick={() => this.props.history.push('/questions/integral')}><img className="user-tx" src={user.headimgurl} alt="" /></div>
                <div className="list-box-name">
                    <div className="list-box-name-cell">
                        <p className="name">{user.nickname}</p>
                        <p className="pm">
                            {/* <span className="pm-warp">
                            <span className="pm1">{show == 1 ? '好友排名' : '全国排名'}</span>
                            <span className="pm2">{ranking ? ranking : '未上榜'}</span>
                        </span> */}
                            <span className="pm3">连续答题：{user.continuous}天</span>
                        </p>
                    </div>
                    {/* <p className="jf">积分高于 <span>{gameInfo.rankingIntegral}</span> 分有机会赢得豪华大奖</p> */}
                    <div className="list-box-jf"><span className="integral-name">累计积分</span><span className="integral">{user.integral}分</span></div>
                </div>
            </div>
        )
    }

    render() {
        const { user, dispatch, gameInfo } = this.props
        const { list } = this.state
        console.log(list)
        const inList = user.integralList.reverse()
        return (
            <div className="list">
                <img className="list-title" src={require('../static/image/list-bg.png')} alt="" />
                {/* <img className="goodsList-title" src={require('../static/image/list-bg.png')} alt="" /> */}
                {this.renderMe()}
                <div className="integralList">
                    {inList.length <= 0 ? '您还没有积分' : ''}
                    {inList && inList.map((item, index) => {
                        return (
                            <li key={index}>
                                <img src={require('../static/image/duigou.png')} alt="" />
                                {item.type === 1 ? <span>正确答题</span> : null}
                                {item.type === 2 ? <span>连续答题</span> : null}
                                {item.type === 3 ? <span>每日分享</span> : null}
                                {item.type === 4 ? <span>邀请好友</span> : null}
                                {item.type === 5 ? <span>抽奖</span> : null}
                                <span>+{item.integral}</span>
                            </li>
                        )
                    })}
                </div>

                <div className="home-btns">
                    <div className="go" onClick={() => this.props.history.push('/questions/')}><img src={require('../static/image/btn-goHome.png')} alt="" /></div>
                </div>
                <div className="home-cell">
                    <div className="icon" onClick={() => this.props.history.push('/questions/list')}><img src={require('../static/image/icon-paihangbang.png')} alt="" /></div>
                    <div className="icon" onClick={() => openSherd(dispatch)}><img src={require('../static/image/icon-fxhaoyou.png')} alt="" /></div>
                </div>
                <div className="rules-b">
                    <p>积分高于{gameInfo.rankingIntegral}分有机会赢得豪华大奖</p>
                </div>
            </div>
        );
    }
}

export default connect(({ user, code, gameInfo }) => ({ user, code, gameInfo }))(Integral);
